<template>
  <BasicContainer>
    <div class="comment-box">
      <div>
        <img
          v-if="!show1"
          class="imgload"
          src="../../static/loading.gif"
          alt=""
        />
        <div>
          <span>全部评论</span>
          <div class="lise"></div>
        </div>
        <div v-for="(itm, o) in response" :key="o">
          <div>
            <div class="box">
              <img :src="itm.avatar" alt="" />
            </div>
            <div class="box1">
              <h3 class="space-over">{{ itm.nickname }}</h3>
              <p>{{ itm.text }}</p>
              <div style="display: flex; align-items: center">
                <svg
                  t="1633692257579"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2695"
                  width="28"
                  height="28"
                >
                  <path
                    d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                    p-id="2696"
                    fill="#8a8a8a"
                  ></path>
                </svg>

                <span style="font-size: 18px">{{ itm.digg_num }}</span>
              </div>
            </div>
            <div class="rigte-box">{{ dayDate(itm.date) }}</div>
          </div>
          <div v-if="itm.sub_comment.length !== 0" class="box2">
            <div v-for="(arr, i) in itm.sub_comment" :key="i">
              <div class="box">
                <img :src="arr.avatar" alt="" />
              </div>
              <div class="box1">
                <h3 class="space-over">{{ arr.nickname }}</h3>
                <p>{{ arr.text }}</p>
                <div style="display: flex; align-items: center">
                  <svg
                    t="1633692257579"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2695"
                    width="28"
                    height="28"
                  >
                    <path
                      d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                      p-id="2696"
                      fill="#8a8a8a"
                    ></path>
                  </svg>

                  <span style="font-size: 18px">{{ arr.digg_num }}</span>
                </div>
              </div>
              <div class="rigte-box">{{ dayDate(arr.date) }}</div>
            </div>
          </div>
        </div>
        <demo @change="demo" :show="show1" />
      </div>
    </div>
  </BasicContainer>
</template>

<style lang="scss" scoped>
.comment-box {
  padding: 20px;
  .imgload {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: scale(2);
  }
  .space-over {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    &:hover {
      width: 500px;
    }
  }
  span {
    font-size: 24px;
    color: rgb(136, 129, 129);
    vertical-align: middle;
    display: inline-block;
  }
  .lise {
    display: inline-block;
    border-bottom: 2px solid #ccc;
    width: 91%;
    vertical-align: middle;
    margin-left: 10px;
  }
}
.box {
  width: 100px;
  height: 100%;
  float: left;
  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }
}
.box1 {
  display: inline-block;
  vertical-align: middle;
}
.rigte-box {
  float: right;
  margin-top: 20px;
}
.box2 {
  margin-left: 90px;
}
</style>

<script>
import BasicContainer from "@/components/BasicContainer";
import dayjs from "dayjs";
import demo from "./demo";
import watermark from 'watermark-dom'

let relativeTime = require("dayjs/plugin/relativeTime");
export default {
  components: {
    BasicContainer,
    demo,
  },
  data() {
    return {
      response: [],
      num: null,
      show: true,
      sum: null,
      show1: true,
    };
  },
  mounted() {
    this.getList();
    // window.addEventListener("scroll", this.add);
    // this.sum = window.innerHeight;
    this.$nextTick(()=>{
      watermark.load({ watermark_txt: 'asdalsmdklsadlasdalk' })
    })
  },
  methods: {
    async getList() {
      const res = await this.$http.get(
        "http://douyin.bytedance.com/api/comment/list"
      );
      console.log(res);
      this.response = res.data.comments;
    },
    dayDate(date) {
      require("dayjs/locale/zh-cn");
      dayjs.extend(relativeTime);
      dayjs.locale("zh-cn");
      return dayjs(date).fromNow();
    },
    // 自己封装的组件无线滚动组件
    demo() {
      this.show1 = false;
      setTimeout(async () => {
        const res = await this.$http.get(
          "http://douyin.bytedance.com/api/comment/list"
        );
        this.show1 = true;
        if (res.data.status !== 0) {
          this.open4();
        }
        this.response = [...this.response, ...res.data.comments];
      }, 1000);
    },
    // menu() {
    //   let num = this.$refs.srcollRef.offsetTop;
    //   let aee = window.pageYOffset;
    //   let sum = window.innerHeight;
    //   if (num - aee < sum) {
    //     console.log(2);
    //     if (this.show) {
    //       console.log(1);
    //       this.show = false;
    //       setTimeout(async () => {
    //         const res = await this.$http.get(
    //           "http://douyin.bytedance.com/api/comment/list"
    //         );
    //         this.show = true;
    //         if (res.data.status !== 0) {
    //           this.open4();
    //         }
    //         this.response = [...this.response, ...res.data.comments];
    //       }, 1000);
    //     }
    //   }
    // },
    open4() {
      this.$message({
        showClose: true,
        message: "评论列表获取失败请稍后重试",
        type: "error",
        offset: 249,
      });
    },
  },
};
</script>
